<style lang="less" scoped>
.main-keyword-group {
    .btn-wrap {
        padding: 5px 0;
    }
    .online,
    .offline {
        margin-left: 0;
    }
    .second-row .manage-templet {
        margin-top: 5px;
    }
    .group {
        display: inline-block;
        vertical-align: top;
    }
}
</style>
<template>
    <div class="main main-keyword-group">
        <div class="main-header">
            <el-breadcrumb>
                <el-breadcrumb-item :to="{ path: '/tickets' }">票券管理</el-breadcrumb-item>
                <el-breadcrumb-item>票券管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="main-filters">
            <el-form :inline="true" :model="query">
                <el-form-item>
                    <el-radio-group v-model="query.status">
                        <el-radio-button
                            v-for="(item, id) in statusAlias"
                            :label="id"
                        >{{item.name}}</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="开始时间">
                    <DatePicker type="date" format="yyyy-MM-dd" v-model="query.updated_at"></DatePicker>
                </el-form-item>
                <el-form-item label="票券编号">
                    <el-input :autofocus="true" v-model="ticket_no" @keyup.enter.native="confirm"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="main-actions">
            <div class="main-actions-label">
                共<em>{{itemsData.pagination.total}}</em>条
            </div>
             <div class="main-actions-btns">
                
            </div>
        </div>
        <el-table
            border
            element-loading-text="Loading..."
            v-loading.body="!itemsData.$resolved"
            :data="itemsData.items"
            @sort-change="onSortItems"
            @selection-change="onSelect"
        >
            <el-table-column sortable="custom" prop="id" label="ID" width="80"></el-table-column>
            <el-table-column width="150" prop="ticket_no" label="票券编号"></el-table-column>
            <el-table-column width="80" prop="price" label="价格"></el-table-column>
            <!-- <el-table-column width="100" prop="private_price" label="协议价"></el-table-column> -->
            <!-- <el-table-column width="100"  label="票券大类" inline-template>
                <div>
                    <span>{{ row.grandpa ? row.grandpa.name : '-' }}</span>
                </div>
            </el-table-column> -->
            <el-table-column width="200" label="票券类型" inline-template>
                <div>
                    <span>{{ row.parent ? row.parent.name : '-'}}-{{row.types.name}}-{{row.type}}</span>
                </div>
            </el-table-column>
            <el-table-column label="到期时间" width="200" inline-template>
                <div>
                    <span>{{ row.end_time | date }}</span>
                </div>
            </el-table-column>
            <el-table-column label="生成时间" inline-template>
                <div>
                    <span>{{ row.created_at | date}}</span>
                </div>
            </el-table-column>
            <el-table-column prop="status" label="状态" inline-template>
                <el-tag :type="statusAlias[row.status].icon">{{statusAlias[row.status].name}}</el-tag>
            </el-table-column>
            <!-- <el-table-column label="状态属性" width="100" inline-template>
                <div>
                    <el-tag type="success" v-if="row.status === 1">已上架</el-tag>
                    <el-tag type="warning" v-else>已下架</el-tag>
                </div>
            </el-table-column> -->
            <!-- <el-table-column sortable="custom" prop="priority" label="排序"></el-table-column> -->
        </el-table>

        <el-pagination
            v-if="itemsData.$resolved"
            layout="prev, pager, next, jumper"
            :total="itemsData.pagination.total"
            :current-page="query.page_num"
            :page-size="query.page_size"
            @current-change="onPageChange"
        >
        </el-pagination>
    </div>
</template>

<script>
import ListController from '../controllers/list';
import moment from 'moment';

import TicketModel from '../models/ticket';
import TypeModel from '../models/type';
import CustomModel from '../models/customer';
import Promise from 'bluebird';
import TTXS from '../common/ttxs';

export default new ListController({
    components: {
        DatePicker: require('../components/date-picker')
    },
    data() {
        return {
            ListModel: TicketModel,
            user: TTXS.user,
            query: {
                page_num: 1,
                page_size: 20,
                parent_id: 'all',
                type_id: 'all',
                status: TicketModel.USED,
                updated_at: new Date(moment(new Date()).format('YYYY-MM-DD'))
            },
            ticket_no: '',
            statusMap: {
                OFFLINE: TicketModel.OFFLINE,
                PENDING: TicketModel.PENDING,
                USED: TicketModel.USED,
                OFFLINE: TicketModel.OFFLINE,
                UNUSED: TicketModel.UNUSED,
                COMPLETED: TicketModel.COMPLETED
            },
            statusAlias: {
                [TicketModel.USED]: {
                    icon: 'success',
                    name: '待核销'
                },
                [TicketModel.COMPLETED]: {
                    icon: 'success',
                    name: '已核销'
                }
            },

            parents: [],
            grands: [],
            customers: [{
                id: 1,
                name: '中国银行'
            }, {
                id: 1,
                name: '农业银行'
            }],

            editData: {},
            editDialogVisible: false
        };
    },
    methods: {
       confirm() {
            return TicketModel.update({
                id: 0,
                ticket_no: this.ticket_no,
                status: TicketModel.COMPLETED
            })
            .$promise
            .then(data => {
                this.ticket_no = '';
                return this.loadItems();
            })
            .catch(err => {
                this.ticket_no ='';
            });
       }
    }
});
</script>
